<template>
  <div  class="add">
    <h3 class="cll_h3">餐品管理</h3>
    <el-button type="primary" @click="newAdd" color="#999">新增</el-button>
  </div>
  <div>
    <hr />
    <div class="search">
      <el-form :model="form" label-width="120px" :inline="true" style="max-width: 460px">
        <el-form-item>
          <el-input v-model="form.input" placeholder="商品名/单价/简介" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handlesearch" color="#999" >搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <hr />
  </div>
  <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />

    <el-table-column label="商品名" width="150" property="name" />
    <el-table-column property="singlePrice" label="单价" width="120" />
    <el-table-column property="multiPrice" label="多人价格" show-overflow-tooltip width="300">
      <template #default="scope">
        <div class="multiPrice">
        <p>{{scope.row.price1}}</p>
        <p>1-3人价格</p>
      </div>
      <div class="multiPrice">
        <p>{{scope.row.price2}}</p>
        <p>3-5人价格</p>
      </div>
      <div class="multiPrice">
        <p>{{scope.row.price3}}</p>
        <p>5-10人价格</p>
      </div>
      </template>
    </el-table-column>


  <el-table-column property="bill" label="海报" width="150">
    <template #default="scope">
      <div class="demo-type">
        <el-avatar :size="40" shape="square" src="">
          <img :src="scope.row.bill" />
        </el-avatar>
      </div>
    </template>
    </el-table-column>

  

    <el-table-column property="brief" label="简介" show-overflow-tooltip />
    <el-table-column property="time" label="添加时间" show-overflow-tooltip />
    <el-table-column label="操作" :inline="true">
     <template #default="scope">
      <el-link type="info" class="link" @click="edit(scope.row)">编辑</el-link>
      <el-link type="info" class="link">上架</el-link>
      <el-link type="info" class="link">下架</el-link>
     </template>
    </el-table-column>
  </el-table>
<!-- 分页器 -->
  <el-pagination 
  background layout="prev, pager, next" 
  :total="total"
  :default-page-size="pageSize"
  @current-change="pagechange"
  class="paging"
  />
</template>

<script  lang="ts">
import { defineComponent } from 'vue'
import {cuisine  } from '@/api/cuisine'
export default defineComponent({
  name: '',
  data() {
    return {
      form: {
        input:'',
        page:1,
      },
     
      tableData: [
    //  {
    //   //  name: '男士餐',
    //   //   singlePrice: 45,
    //   //   multiPrice: {price1:45,price2:55,price3:65, },
    //   //   bill: '',
    //   //   brief: '李大宝',
    //   // time:'@DATETIME("yyyy-MM-dd HH:mm:ss")',
    // }
      ],
      total:5,
      pageSize:5,
    }
  },

  methods: {
    newAdd() {
      console.log(this.$router)
     this.$router.push('/cuisine/addbrief')
    },
    edit(item:any) {
      this.$router.push({
        path:'/cuisine/addbrief',
        query:item,
      })
    },
    handleSelectionChange() {
    },
    async handlesearch(){
      const data = this.form
      data.page=1
      const res = await cuisine(data)
       // @ts-ignore
       this.tableData=res.list
        // @ts-ignore
        this.total = res.total
        // @ts-ignore
        this.pageSize = res.pageSize
      // console.log(this.tableData)
      // if(this.form.input){
      //   this.tableData=this.tableData.filter((item)=>{
      //     //@ts-ignore
      //     return item.name===this.input||item.singlePrice==this.input||item.brief==this.input
      //   })
      // }
    },
    async pagechange(page:any){
      const data = this.form
      data.page=page
      const res = await cuisine(data)
      // console.log(res)
        // @ts-ignore
        this.tableData=res.list
        // @ts-ignore
        this.total = res.total
        // @ts-ignore
        this.pageSize = res.pageSize
    },
  },
  //请求数据
  created () {

    this.pagechange(1)
  },

}) 
</script>

<style scoped lang="less">
.search {
  margin-top: 20px;
}

.link {
  margin: 0 5px;
}

.multiPrice {
  text-align: center;
  padding-right: 20px;
  display: inline-block;
}
.add{
 display: flex;
 justify-content: space-between;
}
:deep(.el-button){
  color: #fff;
  border-radius:0%;
  height: 30px;
  width: 70px;

}
:deep(.el-input){
  width: 300px;
  height: 25px;
}
.paging{
  margin-top:10px ;
  margin-left: 450px;
}
</style>
